// 外边距
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1)); // next iteration
  @c: @counter * 5;
  .margin-left-@{c} {
    margin-left: (@counter * 5px);
  }
  .margin-top-@{c} {
    margin-top: (@counter * 5px);
  }
  .margin-right-@{c} {
    margin-right: (@counter * 5px);
  }
  .margin-bottom-@{c} {
    margin-bottom: (@counter * 5px);
  }
}
.loop(10); // launch the loop

/*一、 弹性盒子布局 */
.flex {
  display: flex;
  margin-left: 1px;
}

/* 等分 */
.flex-item {
  flex: 1;
}

/* 纵向 */
.flex-direction {
  flex-direction: column;
}

/* 居前 居中 */
.flex-start-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 居前 居下 */
.flex-start-end {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

/* 居前 基线 */
.flex-start-baseline {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}

/* 居中 居上 */
.flex-center-start {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* 居中 居中 */
.flex-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 居中 居后 */
.flex-center-end {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* 居中 基线 */
.flex-center-baseline {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

/* 两边 居上 */
.flex-between-start {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 两边 居中 */
.flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 两边 居下 */
.flex-between-end {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* 两边 基线 */
.flex-between-baseline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* 等距环绕 居上 */
.flex-around-center {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

/* 等距环绕 居中 */
.flex-around-center {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 等距环绕 居下 */
.flex-around-end {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

/* 等距环绕 基线 */
.flex-around-baseline {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
}

/* 居后 居前*/
.flex-end-start {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* 居后 居中*/
.flex-end-center {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 居后 居后*/
.flex-end-end {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* 居后 基线*/
.flex-end-baseline {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}

/* 内联弹性盒子 */
.iflex {
  display: inline-flex;
}

/* 居中 */
.iflex-center {
  display: inline-flex;
  align-items: center;
}

/* 居下 */
.iflex-center {
  display: inline-flex;
  align-items: flex-end;
}

/* 基线 */
.iflex-baseline {
  display: inline-flex;
  align-items: baseline;
}

/*二、 浮动 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.clear {
  clear: both;
}

.clearfix::after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  content: '';
}

/*三、 固定 */
.fixed-center {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}
